<template>
  <view
    class="leader-report-complaint bg-white px-3.5 pt-2.5 pb-6.25 box-border"
  >
    <view class="flex flex-row justify-between items-center">
      <view
        :class="
          queryParam.type == 0
            ? 'opt-btn opt-btn-active'
            : 'opt-btn opt-btn-unactive'
        "
        @click="updateComplaintStat(0)"
        >按月</view
      >
      <view
        :class="
          queryParam.type == 1
            ? 'opt-btn opt-btn-active'
            : 'opt-btn opt-btn-unactive'
        "
        @click="updateComplaintStat(1)"
        >按年</view
      >
      <view class="select-input" @click="showPicker = true">
        <picker
          mode="date"
          :fields="queryParam.type == 0 ? 'month' : 'year'"
          :value="queryParam.yearMonth"
          @change="bindPickerChange"
          @cancel="showPicker = false"
        >
          <up-input
            v-model="timeStr"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择"
            border="none"
            color="#000000"
            placeholderStyle="{color: '#707070'}"
          >
            <template #suffix>
              <view class="pr-1">
                <up-icon name="arrow-down" color="#000000" size="18"></up-icon>
              </view>
            </template>
          </up-input>
        </picker>
      </view>
    </view>
    <view class="mt-4.25">
      <up-grid :border="false" align="center" gap="16rpx" col="4">
        <up-grid-item v-for="(item, index) in complaintStatistics" :key="index">
          <view
            class="flex flex-col item-center text-center w-[100%] h-[100%] part-box py-2 box-border"
            :style="`color:${item.color};background: linear-gradient(180deg, ${item.bgColor0} 0%, ${item.bgColor1} 100%);`"
          >
            <text
              class="text-[42rpx]"
              v-if="index + 1 != complaintStatistics.length"
              >{{ item.num }}</text
            >
            <view
              class="text-[42rpx] flex flex-row justify-center items-center"
              v-else
            >
              <image
                class="w-[11rpx] h-[33rpx] mr-1"
                :src="descendIcon"
                v-if="item.num.includes('-')"
              />
              <image class="w-[11rpx] h-[33rpx] mr-1" :src="riseIcon" v-else />
              <text>{{
                item.num.includes("-") ? item.num.substring(1) : item.num
              }}</text>
            </view>
            <text class="text-[29rpx] pt-1">{{ item.title }}</text>
          </view>
        </up-grid-item>
      </up-grid>
    </view>
    <!-- 举报投诉趋势 -->
    <view class="mt-4.25" v-if="queryParam.type == 1">
      <text class="text-black text-[32rpx] font-bold">举报投诉趋势</text>
      <view class="mt-4 h-[320rpx] bar-chart">
        <qiun-data-charts
          type="column"
          :opts="chartParam.opts"
          tooltipFormat="normalTooltip"
          :chartData="chartParam.chartData"
          :ontouch="true"
        />
      </view>
    </view>
    <!-- 社区投诉排行 -->
    <view class="mt-4.25">
      <text class="text-black text-[32rpx] font-bold">社区投诉排行</text>
      <view class="mt-4">
        <uni-table ref="table" border stripe emptyText="暂无更多数据">
          <uni-tr>
            <uni-th align="center" width="85">社区名称</uni-th>
            <uni-th align="center" width="65">投诉总数</uni-th>
            <uni-th align="center" width="65">有效投诉</uni-th>
            <uni-th align="center" width="65">无效投诉</uni-th>
            <uni-th align="center" width="40">{{
              queryParam.type == 1 ? "同比" : "环比"
            }}</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableList" :key="index">
            <uni-td align="center">{{ item.communityName }}</uni-td>
            <uni-td align="center">
              <view class="text-[#038afe]" @click="scanDetail(item)">{{
                item.sumCount
              }}</view>
            </uni-td>
            <uni-td align="center">{{ item.invalidCount }}</uni-td>
            <uni-td align="center">{{ item.effectiveCount }}</uni-td>
            <uni-td align="center">{{ item.percentage }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import riseIcon from "@/static/icon/rise.png";
import descendIcon from "@/static/icon/descend.png";
import { complaintStat } from "@/api/complaint/index";
import { useUserInfoStore } from "@/stores/userInfo";
import dayjs from "dayjs";
const userInfoStore = useUserInfoStore();
const uToastRef = <any>ref(null);

const data = reactive({
  showPicker: false,
  queryParam: {
    type: 0, // 0按月 1按年
    yearMonth: dayjs(new Date()).format("YYYY-MM"),
    policeLeaderId: userInfoStore.userInfo.userId,
    communityId: null,
  },
  timeStr: dayjs(new Date()).format("YYYY年MM月"),
  tableList: <any>[],
});
const { showPicker, queryParam, timeStr, tableList } = toRefs(data);

const complaintStatistics = ref([
  {
    num: 0,
    title: "全部投诉",
    color: "#038AFE",
    bgColor0: "#FEF9EC",
    bgColor1: "#FFFCF7",
  },
  {
    num: 0,
    title: "有效投诉",
    color: "#61D3C0",
    bgColor0: "#F9FEFD",
    bgColor1: "#F3FFFB",
  },
  {
    num: 0,
    title: "无效投诉",
    color: "#F55300",
    bgColor0: "#F3F9FE",
    bgColor1: "#EEF6FC",
  },
  {
    num: "0%",
    title: "环比",
    color: "#000000",
    bgColor0: "#FEF6F3",
    bgColor1: "#FEEFEB",
  },
]);
// 柱状图
const chartParam = reactive({
  opts: {
    animation: false, // 关闭动画
    update: true, // 关键：是否开启连续更新数据的方法,开启之后就不会抖动了
    duration: 0, // 关闭动画过度
    padding: [10, 5, 5, 0],
    enableScroll: false, //true,
    legend: { show: false },
    dataLabel: false, // 不显示数据标签
    xAxis: {
      rotateLabel: true, // 启用旋转功能减少横向空间占
      rotateAngle: 45, // 文字旋转的角度，取值范围(-90至90)
      // scrollShow: true,
      // itemCount: 8,
      interval: 0,
      boundaryGap: "justify", // 让柱状图两端不留空白
      disableGrid: true, //不绘制纵向网格
      fontColor: "#000000", //字体颜色
      fontSize: 10, //字体大小
      axisLineColor: "#707070", //坐标轴轴线颜色
      marginTop: "5", //X轴文字距离轴线的距离
      // labelCount: 6, //数据点文字单屏幕限制显示的数量
      formatter: function (value, index, opts) {
        // const poi = value.indexOf("社");
        // if (poi > -1) {
        //   // 在字符前面插入换行符
        //   value = value.substring(0, poi) + "<br/>" + value.substring(poi);
        // }
        // console.log(value);
        return value;
      },
    },
    yAxis: {
      disableGrid: true, //不绘制横向向网格
      data: [
        {
          min: 0,
          calibration: true, //刻度线是否显示
          fontColor: "#8A8A8A", //字体颜色
          fontSize: 12, //字体大小
          axisLineColor: "#707070", //坐标轴轴线颜色
        },
      ],
    },
    extra: {
      column: {
        type: "group",
        width: 10,
        linearType: "custom", //渐变类型
        customColor: ["#88C5EC", "#4299FE"],
        activeBgColor: "#000000", //当前点击柱状图的背景颜色
        activeBgOpacity: 0.08, //当前点击柱状图的背景颜色透明度
      },
    },
  },
  chartData: {},
});
// 举报投诉统计
const getComplaintStat = () => {
  complaintStat(queryParam.value)
    .then((res: any) => {
      const { data } = res;
      // 总数统计
      complaintStatistics.value[0].num = data.sumCount ?? 0;
      complaintStatistics.value[1].num = data.invalidCount ?? 0;
      complaintStatistics.value[2].num = data.effectiveCount ?? 0;
      complaintStatistics.value[3].num = data.sumPercentage ?? "0%";
      if (queryParam.value.type == 1) {
        complaintStatistics.value[3].title = "同比";
      } else {
        complaintStatistics.value[3].title = "环比";
      }
      // 年度统计柱状图数据
      if (queryParam.value.type == 1) {
        data.cltCmyChartVos = data.cltCmyChartVos ?? [];
        let xdata = <any>[];
        let ydata = <any>[];
        if (data.cltCmyChartVos.length) {
          data.cltCmyChartVos.forEach((item: any) => {
            xdata.push(item.communityName);
            ydata.push(+item.communityCount);
          });
        }
        let seriesData = {
          categories: xdata,
          series: [
            {
              name: "投诉次数",
              data: ydata,
            },
          ],
        };
        chartParam.chartData = JSON.parse(JSON.stringify(seriesData));
      }

      // 表格数据
      tableList.value = data.cltTableVos ?? [];
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 举报投诉统计改变筛选条件
const updateComplaintStat = (mode: number) => {
  queryParam.value.type = mode;
  if (mode == 0) {
    queryParam.value.yearMonth = dayjs(new Date()).format("YYYY-MM");
    timeStr.value = dayjs(new Date()).format("YYYY年MM月");
  } else {
    queryParam.value.yearMonth = dayjs(new Date()).format("YYYY");
    timeStr.value = dayjs(new Date()).format("YYYY年");
  }
  getComplaintStat();
};
// 时间选择改变
const bindPickerChange = (e: any) => {
  if (e.detail.value.includes("-")) {
    queryParam.value.yearMonth =
      e.detail.value.split("-")[0] + "-" + e.detail.value.split("-")[1];
    timeStr.value =
      e.detail.value.split("-")[0] + "年" + e.detail.value.split("-")[1] + "月";
  } else {
    queryParam.value.yearMonth = e.detail.value;
    timeStr.value = e.detail.value + "年";
  }
  getComplaintStat();
};
// 查看举报投诉详情
const scanDetail = (row: any) => {
  uni.navigateTo({
    url: `/subPages/leader/reportComplaint/detail?detailInfo=${JSON.stringify(
      row
    )}&type=${queryParam.value.type}&yearMonth=${queryParam.value.yearMonth}`,
  });
};
onMounted(() => {
  // getComplaintStat();
});
onShow(() => {
  getComplaintStat();
});
</script>

<style lang="scss" scoped>
.leader-report-complaint {
  .select-input {
    width: calc(100% - 84rpx - 84rpx - 24rpx);
    ::v-deep .u-input__content {
      border-radius: 14rpx !important;
      border: 0.7rpx solid #707070 !important;
    }
    ::v-deep .u-input__content__field-wrapper__field {
      padding: 0 22rpx;
      height: 50rpx !important;
    }
  }
  .bar-chart {
    width: 100%;
    height: 300rpx;
  }
  ::v-deep .uni-table {
    min-width: 0 !important;
  }
  ::v-deep .uni-table-th {
    padding: 12rpx 16rpx;
    font-size: 25rpx;
    font-weight: 400;
    color: #000000;
    // border-bottom: 0.7rpx #707070 solid;
    background: #e1eeff;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
  }
  ::v-deep .uni-table-td {
    padding: 12rpx 16rpx;
    font-size: 25rpx;
    font-weight: 400;
    color: #000000;
  }
  //   ::v-deep .table--border {
  //     border-right: 0.7rpx #707070 solid;
  //   }
  //   ::v-deep .uni-table-tr {
  //     .table--border:last-child {
  //       border-right: none;
  //     }
  //   }
}
</style>
